// 放置所有和权限相关的文件代码

// 权限拦截 导航守卫 路由守卫  router
import router from '@/router' // 引入路由实例
import store from '@/store' // 引入vuex store实例
import { asyncRoutes } from '@/router'

// 声明一个白名单
const whiteList = ['/login', '/404'] // 定义白名单  所有不受权限控制的页面

import NProgress from 'nprogress' // 引入一份进度条插件
import 'nprogress/nprogress.css' // 引入进度条样式
router.beforeEach(async(to, from, next) => {
  NProgress.start() // 开启滚动条
  // to 目标路由对象(去哪里)
  // from 来源路由对象(从哪里来)
  // next 可执行的放行方法
  // 拿到token后做判断
  if (store.getters.token) { // 如果有 token
    if (to.path === 'login') {
      // 如果有token 并且要去登录页 强制跳回到首页
      // 跳到主页
      next('/')
    } else { // 有token但是不去登录页, 直接放行
      // 调用 actions 函数
      // 保证 数据拿回来之后 再跳转页面

      // 优化: 如果当前vuex中已经存好了用户数据 就不要再次重复发送接口请求了
      if (!store.getters.userId) {
        const res = await store.dispatch('user/asyncSetUserInfo')
        // 需要拿到两个数据  1. 权限数据 menus  2. 前端存储的所有动态路由表
        const menus = res.data.roles.menus
        // console.log(menus, asyncRoutes)
        // 根据两个数据过滤筛选出当前用户可以访问的菜单数据
        // 变量一下asyncRoutes所有的动态路由表 使用每一个遍历出来的路由数据 找到一个标识去 menus里去找
        // 如果能找到 代表有资格      如果找不到 代表没资格
        const filterRoutes = asyncRoutes.filter(item => {
          return menus.includes(item.children[0].name)
        })
        // console.log(filterRoutes)
        // 使用 router实例内置的方法 addRoutes 把过滤好的数据 添加到路由系统中
        router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }])
        // 通过调用mutation函数把过滤之后的动态路由表加入到vuex中
        store.commit('menus/setMenyList', filterRoutes)
        // 添加动态路由表 需要重新进入一次 修复一下
        next({
          ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
          replace: true // 覆盖上一次的记录
        })
        return
      }
      next()
    }
  } else { // 没有token
    if (whiteList.includes(to.path)) {
      // 如果找到了 表示在在白名单里面
      next()
    } else {
      // 没有找到, 不在白名单 跳到登录页
      next('/login')
    }
  }
  //   关闭滚动条
  NProgress.done()
})
